<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由规则</title>
	</head>
	<body>
		<div id="app">
			
			<router-link to="/shopping">商场</router-link>
			<router-link to="/zoo">动物园</router-link>
			
			<router-view></router-view>
			
		</div>
		<template id="shoppingTem">
			<div>
				<h1>我是商场组件</h1>
				<router-link to="/shopping/shose">鞋店</router-link>
				<router-link to="/shopping/phone">手机店</router-link>
				<router-view></router-view>
			</div>
		</template>
			
			
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			const shop = {
				template: '#shoppingTem'
			}
			const zoo ={
				template:'<h1>我是动物园组件</h1>'
			}
			const shose={
				template:'<h1>我是鞋店组件</h1>'
			}
			const phone={
				template:'<h1>我是手机组件</h1>'
			}
			
			const router=new VueRouter({
				routes:[
					{path:'/shopping',component:shop,
					children:[
						{path:'/shopping/shose',component:shose},
						{path:'/shopping/phone',component:phone}
					]},
					{path:'/zoo',component:zoo}
				]
			})
			
			
			//6.将路由组件挂载到Vue中
			const app = new Vue({
				el: "#app",
				router
			})
			
		</script>
		
		
		
	</body>
</html>